<!-- 饼图 -->
<template>
  <div>
    <div class="title">
      <p>{{ title }}</p>
    </div>
    <div ref="piechart" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "综合统计数据分析"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    chartData: {
      type: Array,
      required: true
    }
  },
	watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
		this.$nextTick(()=>{
			this.setOptions(this.chartData)
		})
    
  },
  methods: {
    setOptions(chartData) {
			this.myChart = this.$echarts.init(this.$refs.piechart, "macarons");
      this.myChart.setOption({
        title: {
          left: "center"
        },
        tooltip: {
          trigger: "item",
					backgroundColor: '#fff'
        },
        legend: {
          orient: "vertical",
          left: "right"
        },
				
        series: [
          {
            type: "pie",
            radius: "50%",
            data: chartData,
						label:{
							normal:{
								show: true,
								formatter: "{c}"
							}
						},
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
</style>